<template>
	<a-modal v-bind="options" class="a-modal-application-info-dialog">
		<!-- 发票详情 -->
		<a-descriptions :column="3" class="ant-descriptions-blockquote">
			<template #title>
				发票详情

				<a-tag :color="statusList[invoiceDetails?.approvalStatus || 11]?.color">
					{{ statusList[invoiceDetails?.approvalStatus || 11]?.name }}
				</a-tag>
			</template>

			<a-descriptions-item label="发票类型">
				<!-- 增值税电子普通发票 -->
				{{ invoiceKindOptions[invoiceDetails.invoiceType] }}
			</a-descriptions-item>

			<a-descriptions-item label="抬头类型">{{ invoiceDetails?.buyerType === 1 ? '个人' : '企业' }}</a-descriptions-item>

			<a-descriptions-item label="发票抬头">{{ invoiceDetails?.buyerName }}</a-descriptions-item>

			<a-descriptions-item label="税号">{{ invoiceDetails?.buyerTaxpayerNum }}</a-descriptions-item>

			<a-descriptions-item label="注册地址" span="2">{{ invoiceDetails?.buyerAddress }}</a-descriptions-item>

			<a-descriptions-item label="注册电话">{{ invoiceDetails?.buyerTel }}</a-descriptions-item>
			<a-descriptions-item label="开户银行">{{ invoiceDetails?.buyerBankName }}</a-descriptions-item>
			<a-descriptions-item label="银行账户">{{ invoiceDetails?.buyerBankAccount }}</a-descriptions-item>
			<a-descriptions-item label="备注" span="3">{{ invoiceDetails?.remark }}</a-descriptions-item>
		</a-descriptions>

		<a-typography-text strong>
			<blockquote class="position">
				账单信息
				<div class="amount">金额合计:{{ totalPrice }}元</div>
			</blockquote>
		</a-typography-text>
		<vxe-grid ref="grid" v-bind="gridOptions" :data="(invoiceDetails?.detailItems as Array<any>)">
			<template #date="{row}">{{ row.beginTime }}至{{ row.endTime }}</template>
		</vxe-grid>
		<br />

		<!-- 收件人信息 -->
		<a-descriptions title="申请信息" :column="3" class="ant-descriptions-blockquote">
			<a-descriptions-item label="姓名">{{ invoiceDetails?.takerName|| invoiceDetails?.renterName }}</a-descriptions-item>

			<a-descriptions-item label="手机号码">{{ invoiceDetails?.takerTel|| invoiceDetails?.renterPhone }}</a-descriptions-item>

			<a-descriptions-item label="邮箱地址">
				{{ invoiceDetails?.takerEmail }}
			</a-descriptions-item>
		</a-descriptions>

		<br />

		<!-- 合同信息 -->
		<a-descriptions title="合同信息" :column="3" class="ant-descriptions-blockquote">
			<a-descriptions-item label="合同类型">{{ contractData?.contractType === 1 ? '个人' : '企业' }}合同</a-descriptions-item>

			<!-- 租客合同 -->
			<template v-if="invoiceDetails?.contractId">
				<a-descriptions-item label="房源地址" span="3">
					<div>{{ contractData?.house?.address }}</div>
				</a-descriptions-item>
				<a-descriptions-item label="租客姓名">{{ contractData?.renterInfo?.name || '-' }}</a-descriptions-item>

				<a-descriptions-item label="电话">{{ contractData?.renterInfo?.phone || '-' }}</a-descriptions-item>

				<a-descriptions-item label="合同周期">
					{{ contractData?.beginTime || '-' }} 至 {{ contractData?.endTime || '-' }}
				</a-descriptions-item>

				<a-descriptions-item label="押金">{{ contractData?.deposit?.toFixed(2) }}元</a-descriptions-item>

				<a-descriptions-item label="租金">{{ contractData?.price?.toFixed(2) }}元/月</a-descriptions-item>
			</template>
			<!-- 包租合同 -->
			<template v-else>
				<a-descriptions-item label="企业名称" span="3">
					<div>{{ contractData?.enterPriseDTO?.enterPriseName }}</div>
				</a-descriptions-item>
				<a-descriptions-item label="联系人">{{ contractData?.renterInfoDTO?.name || '-' }}</a-descriptions-item>

				<a-descriptions-item label="联系人手机号">{{ contractData?.renterInfoDTO?.phone || '-' }}</a-descriptions-item>

				<a-descriptions-item label="合同周期">
					{{ contractData?.beginTime || '-' }} 至 {{ contractData?.endTime || '-' }}
				</a-descriptions-item>

				<a-descriptions-item label="承租总价">
					{{ contractData?.deposit?.toFixed(2) }}元/月(共{{ contractData?.houseRoomDTOList?.length }}间)
				</a-descriptions-item>

				<a-descriptions-item label="押金总价">{{ contractData?.price?.toFixed(2) }}元</a-descriptions-item>
			</template>

			<a-descriptions-item label="付款方式">
				<span>押{{ contractData?.depositMonth }}</span>
				<span v-if="contractData?.periodMonth === 99">一次性付</span>
				<span v-else>付{{ contractData?.periodMonth }}</span>
			</a-descriptions-item>
		</a-descriptions>
		<!-- 开票信息 -->
		<a-descriptions title="拒绝信息" :column="3" class="ant-descriptions-blockquote" v-if="invoiceDetails?.approvalStatus === 12">
			<a-descriptions-item label="拒绝人">{{ invoiceDetails?.updateName }}</a-descriptions-item>
			<a-descriptions-item label="拒绝人手机">{{ invoiceDetails?.updatePhone }}</a-descriptions-item>
			<a-descriptions-item label="拒绝时间">{{ invoiceDetails?.updateTime }}</a-descriptions-item>
			<a-descriptions-item label="拒绝备注" span="3">{{ invoiceDetails?.failureReason }}</a-descriptions-item>
		</a-descriptions>

		<!-- 开票信息 -->
		<a-descriptions
			title="开票信息"
			:column="3"
			class="ant-descriptions-blockquote"
			v-if="![11, 12].includes(invoiceDetails?.approvalStatus)">
			<a-descriptions-item label="开票来源">{{ sourceType[invoiceDetails?.sourceType || 0] }}</a-descriptions-item>

			<a-descriptions-item label="提交人">{{ invoiceDetails?.createrName }}</a-descriptions-item>
			<a-descriptions-item label="提交时间">{{ invoiceDetails?.createTime }}</a-descriptions-item>
		</a-descriptions>
		<!-- </div> -->
		<template #footer>
			<template v-if="[11].includes(invoiceDetails?.approvalStatus)">
				<template v-for="(btn, index) in statusList[invoiceDetails?.approvalStatus || 11].operation" :key="index + 1">
					<a-button v-action="btn.action" :type="btn.type" @click="handler(btn.field)">{{ btn.name }}</a-button>
				</template>
			</template>
			<template v-else>
				<a-button @click="close">关闭</a-button>
			</template>
		</template>
	</a-modal>
	<!-- 开发申请处理 -->
	<apply-invoice-dialog
		v-model:visible="visibles.applyInvoice"
		:billDetailItems="invoiceDetails?.detailItems"
		:data-source="contractData"
		:page-type="3"
		:applyId="invoiceDetails.id"
		:dept-id="invoiceDetails.departmentId"
		@close="getInvoiceDetails()" />
	<apply-invoice-handler v-model:visible="visibles.refuse" :id="invoiceDetails.id" @close="getInvoiceDetails()" />
</template>
<script setup lang="ts">
	import {reactive, ref, watch, toRef, createVNode} from 'vue'
	import {Modal, message} from 'ant-design-vue'
	import {invoicingDetails, approvalHandle} from '@/api/invoicing-history'
	import {statusList} from '@/utils/billing-history-status'
	import ApplyInvoiceDialog from '@/components/contract/invoice/apply-invoice.vue'
	import ApplyInvoiceHandler from '@/components/finance/invoice-administration/billing-history/apply-invoice-handler.vue'
	import {getRenterContractDetail} from '@/api/contract'
	import {VxeGridProps} from 'vxe-table'
	import {useStore} from '@/store/index'
	const hasPermissions = useStore().hasPermissions

	const props = defineProps<{
		id?: string
		processInstanceId?: string
		visible: boolean
		contract?: {
			businessId?: string
			// 判断是否来源于主应用
			source?: string
			// 判断是否是审批
			isApproval?: boolean
			// 审批模块类型
			approvalType?: string
			// 审批模块
			processInstanceId?: string
			isShow?: boolean
		}
	}>()
	const emits = defineEmits(['update:visible', 'close'])
	const invoiceKindOptions = [
		'增值税电子普通发票',
		'增值税电子专用发票',
		'电子发票（普通发票）',
		'电子发票（增值税专用发票）',
		'增值税普通发票',
		'增值税专用发票'
	]
	const sourceType = ['pms', '第三方录入', '租客端']
	const options = reactive({
		width: 1300,
		mixHeight: 600,
		maxHeight: '80vh',
		centered: true,
		title: '申请信息',
		maskClosable: false,
		destroyOnClose: true,
		confirmLoading: true,
		visible: toRef(props, 'visible'),
		onCancel() {
			// emits('close')
			emits('update:visible', false)
			setTimeout(() => emits('close'), 100)
		}
	})
	const visibles = reactive({
		applyInvoice: false,
		refuse: false
	})

	watch(
		() => props.visible,
		newVal => {
			if (newVal) {
				totalPrice.value = 0
				getInvoiceDetails()
			}
		}
	)
	// 发票详情
	const invoiceDetails = ref<any>({})
	const gridOptions = reactive<VxeGridProps>({
		size: 'small',
		maxHeight: 300,
		// height: '400',
		showOverflow: true,
		border: true,
		rowConfig: {
			isHover: true
		},
		columns: [
			{
				title: '费用类型',
				align: 'left',
				// minWidth:150,
				field: 'feeSubjectName'
			},
			{
				title: '费用周期',
				minWidth: 200,
				align: 'center',
				slots: {
					default: 'date'
				}
			},
			{
				title: '已收时间',
				align: 'left',
				field: 'practicalTime'
			},
			{
				title: '已收(元)',
				// minWidth: 150,
				align: 'right',
				field: 'occurredMoney',
				formatter({row}) {
					let money = 0
					if(row.occurredMoney===row.originalMoney && row.practicalTime){
						money = row.originalMoney
					}else if(row.notOccurredMoney===row.originalMoney && !row.practicalTime){
						money = 0
					}
					return money.toFixed(2)
				}
			},
			{
				title: '金额(元)',
				// minWidth: 150,
				align: 'right',
				field: 'originalMoney',
				formatter({row}) {
					return row?.price ? row?.price.toFixed(2) : 0
				}
			}
		]
	})
	// 关闭
	const close = () => {
		setTimeout(() => emits('close'), 100)
		emits('update:visible', false)
	}
	const totalPrice = ref<any>(0)
	//获取发票详情
	const getInvoiceDetails = () => {
		let id = props.id || props?.contract?.businessId
		invoicingDetails(id).then((res: any) => {
			invoiceDetails.value = res.data
			console.log(invoiceDetails.value, 'invoiceDetails.value')
			invoiceDetails.value?.detailItems.forEach((e: any) => {
				totalPrice.value += e?.price
			})
			getRenterContractDetailF()
		})
	}
	const contractData = ref<any>({})
	const getRenterContractDetailF = () => {
		getRenterContractDetail(invoiceDetails.value?.contractId).then((res: any) => {
			contractData.value = res.data
		})
	}
	const handler = (type: string) => {
		switch (type) {
			case 'refuse':
				//拒绝
				visibles.refuse = true
				break
			case 'handle':
				//处理
				visibles.applyInvoice = true
				break
		}
	}
	const setApprovalHandle = () => {
		const params: any = {
			approvalStatus: 1,
			orgItemId: props.id
		}
		approvalHandle(params).then(({data}) => {
			message.success('操作成功')
			getInvoiceDetails()
		})
	}
</script>
<style lang="less">
	.a-modal-application-info-dialog {
		padding: 20px;
		// height: 80vh;
		.position {
			position: relative;
			.amount {
				position: absolute;
				right: 0;
				top: 0;
			}
		}
	}
</style>
